<template>
  <view class="router-view bcl-active">
    <view class="container">
      <!--  钱包 -->
      <view
        class="bcl-white wallet radius mb-15 shadow"
        v-for="(item, index) in walletInfo"
        :key="index"
      >
        <view class="p-20 box box-column-center border border-bottom">
          <view class="icon">
            <image
              src="/static/images/bank_icon.png"
              class="width height block"
            />
          </view>
          <view class="box-1 ml-10">
            <view class="fz-24 cl-main"
              ><text class="fz-12">￥</text>{{ item.price }}</view
            >
            <view class="cl-basic">{{ item.name }}</view>
          </view>
          <navigator
            :url="
              index == 'balance'
                ? '/user/record/tradeNew?type=' + index
                : '/user/record/trade?type=' + index
            "
          >
            <button class="uni-button uni-button-radius">交易明细</button>
          </navigator>
        </view>

        <!--  按钮 -->
        <view class="box fz-15 btn-box">
          <navigator
            class="box-1 text-center pb-15 pt-15 cl-warning pointer"
            :url="
              item.name != '我的保证金'
                ? '/pay/pay?type=0'
                : '/pay/bond?balance=' + item.price
            "
            target="view"
          >
            立即充值
          </navigator>
          <navigator
            class="box-1 text-center pb-15 pt-15 cl-basic pointer"
            url="/pay/withdraw"
            target="view"
            v-if="item.name != '我的保证金'"
          >
            我要提现
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { wallertInfo } from "@/apis/user";

export default {
  data() {
    return {
      walletInfo: {
        balance: { price: 0.0, name: "钱包余额" },
        bond: { price: 0.0, name: "我的保证金" },
      },
    };
  },

  onShow() {
    this.getWallert();
  },

  methods: {
    /**
     * 获取钱包数据
     */
    async getWallert() {
      let { code, data, message } = await wallertInfo();
      if (code === 200) {
        this.walletInfo.balance.price = data.balance;
        this.walletInfo.bond.price = data.bond;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.router-view {
  .wallet {
    .icon {
      width: 100upx;
      height: 100upx;
    }

    .btn-box {
      .box-1 {
        position: relative;

        &:first-child::before {
          content: "";
          width: 2upx;
          height: 40upx;
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          background-color: $color-border;
        }
      }
    }
  }
}
</style>
